import React from 'react';
import './first.css'
// 导入二级路由的出口
import {Outlet,Link} from 'react-router-dom'


export function Page1(){
    return (
        <div className="page1">
            页面1
        </div>
    )
}
export function Page2(){
    return (
        <div className="page2">
            页面2
            <div>
                <Link to='/first/page2'>页面3</Link>
                <Link to='/first/page2/page4'>页面4</Link>
            </div>
            <div>
                <Outlet></Outlet>
            </div>
        </div>
    )
}

export function Page3(){
    return (
        <div className="page3">
            页面3
        </div>
    )
}

export function Page4(){
    return (
        <div className="page4">
            页面4
        </div>
    )
}

function First() {
    return (
        <div className='first'>
            <div className="left">
                <p><Link to='/first'>页面1</Link></p>
                <p><Link to='/first/page2'>页面2</Link></p>
            </div>
            <div className="right">
                {/* 这里就是二级路由页面的出口，相当于vue中的view-router */}
                <Outlet></Outlet>
            </div>
        </div>
    );
}

export default First;
